<template>
  <view :class="['page', { 'slide-in': animateIn, 'slide-out': animateOut }]">
    <view class="top-nav">
      <view class="nav-left" @tap="goBack">
        <image class="nav-icon" :src="backIcon" mode="widthFix" />
        <text class="nav-title">{{ buyerTitle }}</text>
      </view>
      <image class="nav-refresh" :src="refreshIcon" mode="widthFix" @tap="onRefresh" />
    </view>
    <scroll-view class="main-scroll" scroll-y>
      <view class="product-header">
        <view class="product-info">
          <view class="product-name">
            <view class="product-name-top">
              <text class="name">{{ productName }}</text>
              <view class="tag-white">
                <text class="tag-text">{{ unitText }}</text>
              </view>
            </view>
            <view class="tag-red">
              <text class="tag-text-white">{{ ownerInfo }}</text>
            </view>
          </view>
          <view class="product-switch">
            <view class="sale-type-switch">
              <view class="switch-btn" :class="{active: isPieceSale}" @tap="toggleSaleType('piece')">按件售</view>
              <view class="switch-btn" :class="{active: !isPieceSale}" @tap="toggleSaleType('jin')">按斤售</view>
            </view>
          </view>
        </view>
      </view>
      <view class="input-area">
        <view v-for="(card, index) in cards" :key="card.key" class="input-card"
          :class="{selected: currentSelected===card.key}" @tap="selectCard(card.key)">
          <input class="card-input" :type="cardInputType(card)" v-model="card.value" :placeholder="card.placeholder" />
          <view class="input-display">{{ card.value }} {{ card.unit }}</view>
          <view class="card-footer" v-if="card.key==='lizi' || card.key==='kaipiao'">
            <text class="total-fee">总费用: {{ formatMoney(calcTotal(card)) }}元</text>
            <button class="action-btn">确认</button>
          </view>
        </view>
        <view v-for="(card, index) in fujiaCards" :key="card.key" class="input-card"
          :class="{selected: currentSelected===card.key}" @tap="selectCard(card.key)">
          <view class="fujiafei_card_header">
            <view class="fujiafei_card_label">{{card.label}}</view>
            <input class="card-input" :type="cardInputType(card)" v-model="card.value"
              :placeholder="card.placeholder" />
            <view class="fujiafei_card_unit"> {{card.unit}}</view>
          </view>
          <view class="card-footer" v-if="card.key==='lizi' || card.key==='kaipiao'">
            <text class="total-fee">{{ formatMoney(calcTotal(card)) }}元</text>
            <button class="action-btn">买家出</button>
          </view>
        </view>
      </view>

      <view class="remark-area">
        <text class="remark-label">添加备注</text>
        <image :src="editIcon" class="remark-icon" @tap="toggleRemarkInput" mode="widthFix" />
        <textarea class="remark-input" v-if="showRemarkInput" v-model="remark" placeholder="请输入备注"></textarea>
      </view>
    </scroll-view>
    <view class="bottom-area">
      <view class="summary">
        <view class="summary-item">
          <text class="sum-label">全部:</text>
          <view v-for="(val, index) in allPrices" :key="index" class="tag-clickable" @tap="onTagTap(val)">
            <text class="sum-value">{{val}}</text>
          </view>
        </view>
        <view class="summary-item">
          <text class="sum-label-b">货款:</text>
          <text class="sum-value-b">{{formatMoney(goodsTotal)}}元</text>
        </view>
        <view class="summary-item">
          <text class="sum-label">买家:</text>
          <view v-for="(val, index) in buyerPrices" :key="index" class="tag-clickable" @tap="onTagTap(val)">
            <text class="sum-value">{{val}}</text>
          </view>
        </view>
        <view class="summary-item">
          <text class="sum-label-b">小计:</text>
          <text class="sum-value-b">{{formatMoney(subTotal)}}元</text>
        </view>
      </view>
      <view class="calculator">
        <view class="calc-btn operator plus" @tap="onKeyTap('+')">+</view>
        <view class="calc-btn operator minus" @tap="onKeyTap('-')">-</view>
        <view class="calc-btn operator mul" @tap="onKeyTap('*')">*</view>
        <view class="calc-btn operator div" @tap="onKeyTap('/')">÷</view>

        <view class="calc-btn seven" @tap="onKeyTap('7')">7</view>
        <view class="calc-btn eight" @tap="onKeyTap('8')">8</view>
        <view class="calc-btn nine" @tap="onKeyTap('9')">9</view>
        <view class="calc-btn action next-item" @tap="onNext">下一项</view>

        <view class="calc-btn four" @tap="onKeyTap('4')">4</view>
        <view class="calc-btn five" @tap="onKeyTap('5')">5</view>
        <view class="calc-btn six" @tap="onKeyTap('6')">6</view>
        <view class="calc-btn action confirm" @tap="onConfirm">确认</view>

        <view class="calc-btn one" @tap="onKeyTap('1')">1</view>
        <view class="calc-btn two" @tap="onKeyTap('2')">2</view>
        <view class="calc-btn three" @tap="onKeyTap('3')">3</view>


        <view class="calc-btn zero" @tap="onKeyTap('0')">0</view>
        <view class="calc-btn dot" @tap="onKeyTap('.')">.</view>
        <view class="calc-btn operator del" @tap="onKeyTap('del')">
          <text style="font-size:28rpx;">⌫</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { formatMoney } from '@/utils'

  const productName = ref('芷湖青椒')
  const unitText = ref('1件=10公斤')
  const ownerInfo = ref('王老板/0008')
  const buyerTitle = ref('临时买家')

  const backIcon = '/static/images/back.png'
  const refreshIcon = '/static/images/order/refresh.png'
  const editIcon = '/static/images/order/edit.png'
  const animateOut = ref(false)
  const animateIn = ref(false)
  const isPieceSale = ref(false)
  const remark = ref('')
  const showRemarkInput = ref(false)

  const cards = ref([
    { key: 'weight', label: '请输入重量', unit: '斤', value: '100', placeholder: '请输入重量' },
    { key: 'price', label: '请输入价格', unit: '元/斤', value: '3.6', placeholder: '请输入价格' },

  ])

  const fujiaCards = ref([
    { key: 'lizi', label: '力资', unit: '元/斤', value: 5, placeholder: '请输入力资价' },
    { key: 'kaipiao', label: '开票', unit: '元/斤', value: 2, placeholder: '请输入开票价' }
  ])
  const cardsMap = computed(() => {
    const map : any = {}
    cards.value.forEach(c => {
      map[c.key] = c
    })
    return map
  })

  const currentSelected = ref('weight')

  const allPrices = ref(['3.60', '3.60', '3.60'])
  const buyerPrices = ref(['3.60', '3.60'])
  const goodsTotal = ref(9999)
  const subTotal = ref(99999)

  const liZiTotal = computed(() => {
    const w = Number(cardsMap.value.weight.value) || 0
    const p = Number(cardsMap.value.lizi.value) || 0
    return w * p || 0
  })
  const kaiPiaoTotal = computed(() => {
    const w = Number(cardsMap.value.weight.value) || 0
    const p = Number(cardsMap.value.kaipiao.value) || 0
    return w * p || 0
  })

  function onRefresh() { }
  function goBack() {
    animateOut.value = true
    setTimeout(() => {
      animateOut.value = false;
      uni.navigateBack();
    }, 300)

  }
  function toggleSaleType(type : 'piece' | 'jin') {
    isPieceSale.value = (type === 'piece')
  }
  function onKeyTap(key : string) { }
  function onNext() { }
  function onConfirm() { }
  function selectCard(cardName : string) {
    currentSelected.value = cardName
  }
  function toggleRemarkInput() {
    showRemarkInput.value = !showRemarkInput.value
  }
  function onTagTap(val : string) { }

  function cardInputType(card : any) {
    if (card.key === 'price' || card.key === 'lizi' || card.key === 'kaipiao') return 'digit'
    return 'number'
  }


  onShow(() => {
    animateOut.value = true
    setTimeout(() => {
      animateOut.value = false
    }, 300)
  })
  function calcTotal(card : any) {
    const w = Number(cardsMap.value.weight.value) || 0
    const p = Number(card.value) || 0
    return w * p || 0
  }
</script>

<style scoped>
  .page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    padding-bottom: 60rpx;
  }

  .page.slide-out {
    transform: translateX(-100%);
  }

  .page.slide-in {
    transform: translateX(0);
  }

  .top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    padding: 0 20rpx;
    z-index: 1000;
    border-bottom: 1rpx solid #eee;
  }

  .nav-left {
    display: flex;
    align-items: center;
  }

  .nav-icon {
    width: 42rpx;
    height: 42rpx;
    margin-right: 16rpx;
  }

  .nav-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 700;
  }

  .nav-refresh {
    width: 30rpx;
    height: 30rpx;
  }

  .main-scroll {
    margin-top: 80rpx;
    flex: 1;
    background: #f5f5f5;
  }

  .product-header {
    background: #fff;
    border-bottom-left-radius: 40rpx;
    border-bottom-right-radius: 40rpx;
    padding: 0rpx;
  }

  .product-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .product-name {
    background: #23DE6E;
    border-bottom-left-radius: 40rpx;
    border-bottom-right-radius: 40rpx;
    display: flex;
    flex-direction: column;
    color: #fff;
    padding: 20rpx 30rpx;
    flex: 1;
  }

  .product-name-top {
    display: flex;
    justify-content: space-around;
  }

  .name {
    font-size: 42rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .tag-white {
    background: #fff;
    border-radius: 8rpx;
    height: 40rpx;
    align-self: center;
    padding: 4rpx;
  }

  .tag-red {
    border-radius: 8rpx;
    padding: 0 2rpx;
    display: inline-block;
    white-space: nowrap;
  }

  .tag-text {
    font-size: 24rpx;
    color: #23DE6E;
  }

  .tag-text-white {
    font-size: 22rpx;
    color: #fff;
    background: #ff5033;
    padding: 2rpx;
    border-radius: 2rpx;
  }

  .product-switch {
    flex: 1;
    padding: 20rpx 32rpx 0 10rpx;
  }

  .sale-type-switch {
    display: flex;
    border-radius: 12rpx;
    overflow: hidden;
    border: 1rpx solid #23DE6E;
    margin-top: 20rpx;
    margin-left: 48rpx;
  }

  .switch-btn {
    width: 50%;
    line-height: 50rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #808080;
    background: transparent;
  }

  .switch-btn.active {
    background: #43CF7C;
    color: #fff;
  }

  .input-area {
    background: #fff;
    padding: 20rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .input-card {
    width: 40%;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    padding: 22rpx;
    margin-bottom: 20rpx;
    border: 2rpx solid transparent;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .input-card.selected {
    border: 2px solid #23DE6E;
  }

  .fujiafei_card_header {
    display: flex;
    justify-content: space-between;
  }

  .fujiafei_card_label {
    flex: 1;
    white-space: nowrap;
    margin-right: 20rpx;
  }

  .fujiafei_card_unit {
    flex: 1;
    white-space: nowrap;
  }

  .card-input {
    font-size: 32rpx;
    border: none;
    outline: none;
    width: 100%;
    padding: 0;
    margin-bottom: 20rpx;
    color: #333;
    background: transparent;
  }

  .input-display {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    font-size: 28rpx;
    color: #333;
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
  }

  .total-fee {
    font-size: 28rpx;
    color: #333;
  }

  .action-btn {
    background: #23DE6E;
    color: #fff;
    font-size: 20rpx;
    border-radius: 8rpx;
  }

  .remark-area {
    background: #fff;
    padding: 20rpx;
    position: relative;
  }

  .remark-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    display: inline-block;
    margin-right: 10rpx;
  }

  .remark-icon {
    width: 40rpx;
    height: 40rpx;
    vertical-align: middle;
  }

  .remark-input {
    width: 100%;
    height: 120rpx;
    border: 1rpx solid #ccc;
    border-radius: 8rpx;
    padding: 10rpx;
    font-size: 28rpx;
    color: #333;
    margin-top: 10rpx;
  }

  .bottom-area {
    background: #fff;
    border-top: 1rpx solid #eee;
  }

  .summary {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx;
    justify-content: space-between;
  }

  .summary-item {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .sum-label {
    font-size: 28rpx;
    color: #333;
    margin-right: 5rpx;
  }

  .sum-value {
    font-size: 28rpx;
    color: #4caf50;
    margin-right: 10rpx;
  }

  .sum-label-b {
    color: #FF8D1A;
    font-size: 28rpx;
    margin-right: 5rpx;
    font-weight: bold;
  }

  .sum-value-b {
    font-size: 28rpx;
    color: #FF8D1A;
    margin-right: 10rpx;
  }

  .tag-clickable {
    border: 1rpx solid #43CF7C;
    border-radius: 8rpx;
    padding: 5rpx 8rpx;
    margin-right: 5rpx;
  }

  .calculator {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1rpx solid #eee;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 100rpx);
    z-index: 1000;
    margin-top: 160rpx;
  }

  .calc-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 64rpx;

    border: 1rpx solid #ccc;
    color: #333;
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    margin: 5rpx;
  }

  .calc-btn.operator {
    background: #F2F6F3;
    text-align: center;
  }

  .calc-btn.dot {
    padding-bottom: 20%;
  }

  .calc-btn.action {
    color: #fff;
    font-size: 48rpx;
    writing-mode: vertical-rl;
    letter-spacing: 8rpx;
  }

  .calc-btn.action.confirm {
    font-size: 64rpx;
    letter-spacing: 20rpx;
  }

  .next-item {
    background: rgba(255, 141, 26, 1) !important;
    grid-row: 2 / span 2;
    grid-column: 4 / span 1;
    color: #000 !important;
  }

  .confirm {
    background: rgba(35, 222, 110, 1) !important;
    grid-row: 4 / span 2;
    grid-column: 4 / span 1;
  }

  .plus {
    grid-row: 1;
    grid-column: 1
  }

  .minus {
    grid-row: 1;
    grid-column: 2
  }

  .mul {
    grid-row: 1;
    grid-column: 3
  }

  .div {
    grid-row: 1;
    grid-column: 4
  }

  .seven {
    grid-row: 2;
    grid-column: 1
  }

  .eight {
    grid-row: 2;
    grid-column: 2
  }

  .nine {
    grid-row: 2;
    grid-column: 3
  }

  .four {
    grid-row: 3;
    grid-column: 1
  }

  .five {
    grid-row: 3;
    grid-column: 2
  }

  .six {
    grid-row: 3;
    grid-column: 3
  }

  .one {
    grid-row: 4;
    grid-column: 1
  }

  .two {
    grid-row: 4;
    grid-column: 2
  }

  .three {
    grid-row: 4;
    grid-column: 3
  }

  .zero {
    grid-row: 5;
    grid-column: 1
  }

  .dot {
    grid-row: 5;
    grid-column: 2
  }

  .empty {
    grid-row: 5;
    grid-column: 3
  }

  .empty2 {
    grid-row: 5;
    grid-column: 4
  }

  .del {
    grid-row: 5;
    grid-column: 3;
  }
</style>
